<!-- 
    VUE 中的数据代理:
        1. new 了一个VUE实例;({data:{}})
        2. _data里面是data;  (收集数据);
        3. 拿到vm后,通过getter读取到_data中的name,放到vm属性上 (把_data中的数据放到了vm身上一份,为了更便捷的编码)

    如果VUE中没有数据代理:
        {{_data.title}}
        {{_data.content}}

    {{name}} => _data.name
    vm.name 代理 vm._data.name;
 -->
 <!-- 

    1. VUE 中的数据代理:
        通过vm对象来代理data对象中的属性
    2. 好处
        更加方便地操作data中的数据
    3. 基本原理
        通过Object.defineProperty()把data对象的属性都添加到vm上
        为每个添加的属性,指定一个getter和setter
        读写时用getter和setter操作data中对应的属性 ;

    _data中的不是数据代理,而是数据劫持;   
  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE中的数据代理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>title: {{title}}</h2>
        <h2>content: {{content}}</h2>
    </div>
</body>
<script>
    let data ={
        title: "hello world",
            content: "let the hunt begin!"
    }
    const vm = new Vue({
        el: "#root",
        // title 和 content 都是通过 Object.defineProperty()加上去的 (title和content都有自己的getter和setter);
        // 通过vm读title,读的是data中的title

        // 流程: 当有人读name的时候, getter工作, 给data.name;
        // vm把data存在了自身,叫做_data, _data做了数据劫持; 验证: 

        data
    })
</script>
</html>